<div class="sm-rightPanel">
    <div class="layui-anim layui-anim-upbit">
        <div id="list_form" class="layui-form sm-operation">
            <blockquote class="site-text layui-elem-quote">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户账号：</label>
                        <div class="layui-input-inline">
                            <input name="account" type="text" autocomplete="off" placeholder="用户账号"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">登陆状态：</label>
                        <div class="layui-input-inline">
                            <select name="status" lay-filter="roleStateList">
                                <option value="">全部</option>
                                <option value="0">成功</option>
                                <option value="1">失败</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="query" class="layui-btn"><i class="iconfont icon-sousuo"></i>查询</button>
                    </div>
                </div>
            </blockquote>
        </div>
        <table id="list_table" class="layui-hide" lay-filter="mainList"></table>
    </div>
</div>
<script>
    layui.use(['layer', 'table', 'form'], function () {
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;

        //表单重新渲染
        form.render();

        //表格渲染
        var tableObj = table.render({
            id: 'list_table'
            , elem: '#list_table'
            , url: '/sys/login/info/list'
            , align: "center"
            , cols: [[ //表头
                {type: 'checkbox'}
                , {type: 'numbers', title: '序号', width: 50}
                , {field: 'account', title: '用户账号', width: 140, align: 'center'}
                , {field: 'loginIp', title: '登陆ip', width: 140, align: 'center'}
                , {field: 'loginLocation', title: '登陆地址', width: 150, align: 'center'}
                , {field: 'clientBrowser', title: '浏览器', width: 100, align: 'center'}
                , {field: 'clientOs', title: '操作系统', width: 100, align: 'center'}
                , {
                    field: 'status', title: '登陆状态', width: 100, align: 'center', templet: function (d) {
                        return d.status == 0 ? '<span class="font-success">成功</span>' : '<span class="font-danger">失败</span>';
                    }
                }
                , {field: 'msg', title: '登陆信息', width: 160, align: 'center'}
                , {field: 'loginTime', title: '登陆时间', width: 180, align: 'center'}
            ]]
        });

        //监听工具条
        table.on('tool(mainList)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值

            if (layEvent === 'detail') {

                smartAui.dialog({
                    title: '修改'
                    , template: 'edit'
                    , saveUrl: '/sys/role/update'
                    , tableObj: tableObj
                    , width: 500
                    , height: 400
                    , htmlData: data
                })
            } else if (layEvent === 'authorization') {

                smartAui.dialog({
                    title: '授权'
                    , template: 'authorization'
                    , saveUrl: '/sys/role/menu/save'
                    , tableObj: tableObj
                    , width: 400
                    , height: 500
                    , htmlData: data
                })
            }
        });

        $("#role_add").click(function () {
            smartAui.dialog({
                title: '添加'
                , template: 'add'
                , saveUrl: '/sys/role/save'
                , tableObj: tableObj
                , width: 500
                , height: 400
            })
        });

        $("#role_del").click(function () {
            var data = table.checkStatus('list_table').data;
            if (data.length == 0) {
                layer.msg("请至少选择一条");
                return;
            }
            //是否系统标志
            if (data.length == 1 && data[0].systemFlag == 1) {
                layer.msg("系统数据禁止删除");
                return;
            }
            var arr = [];
            for (var i = 0; i < data.length; i++) {
                if (data[i].systemFlag != 1) {
                    arr.push(data[i].roleId);
                }
            }
            smartAui.confirm('确认删除？', function () {
                $.ajax({
                    type: "post",
                    url: '/sys/role/deleteBatch',
                    data: {"roleIds[]": arr},
                    success: function (result) {
                        if (result.success) {
                            layer.msg("删除成功");
                            smartAui.reloadTable(tableObj);
                        } else {
                            layer.msg("删除异常");
                        }
                    },

                })
            }, 0);
        });


        //查询数据
        $('#query').on('click', function () {
            smartAui.reloadTable(tableObj);
        });

    });
</script>